<template>
  <view class="main">
    <header-vue bgColor="transparent" :searchStatus="true">
      <template v-slot:search>
        <view class="flex" style="justify-content: flex-start; width: 100vw">
          <image
            :src="IMAGE_URL + '/static/mine/xiaoxi.png'"
            style="width: 44rpx; height: 44rpx; margin: 0 20rpx 0 32rpx"
            mode="aspectFit"
          ></image>
          <image
            :src="IMAGE_URL + '/static/mine/kefu.png'"
            style="width: 44rpx; height: 44rpx"
            mode="aspectFit"
          ></image>
        </view>
      </template>
    </header-vue>
    <image :src="IMAGE_URL + '/static/mine/mine-bg.png'" class="bg-box"></image>
    <view class="user">
      <view class="flex start info">
        <image :src="IMAGE_URL + '/static/login/bg.png'" class="avatar"></image>
        <view>
          <view class="font32 fontbold-500">Hi，王小明</view>
          <view class="address font24">华望城悦华园二区34号楼 4-404</view>
        </view>
      </view>
      <view class="flex between wallet">
        <view class="item" @click="onBalanceClick">
          <view class="price fontbold-500">
            <text class="font24">¥</text>
            <text class="font30">100.</text>
            <text class="font24">00</text>
          </view>
          <view class="font20">我的余额</view>
        </view>
        <view class="item" @click="toPoints">
          <view class="font30 fontbold-500">1020</view>
          <view class="font20">我的积分</view>
        </view>
        <view class="item" @click="onWarmCoreValueClick">
          <view class="font30 fontbold-500">100</view>
          <view class="font20">暖芯值</view>
        </view>
      </view>
    </view>
    <view class="white-box" style="margin-top: 40rpx">
      <view class="font30 title fontbold-500">我的订单</view>
      <view class="flex center between order-item">
        <view
          v-for="item in orderType"
          class="flex column"
          @click="goPage(item.url)"
        >
          <image :src="IMAGE_URL + item.icon" mode="aspectFit"></image>
          <view>{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="white-box" style="margin-top: 40rpx">
      <view class="font30 title fontbold-500">我的服务</view>
      <view class="flex center between service-item">
        <view
          v-for="item in serviceType"
          class="flex column item"
          @click="goPage(item.url)"
        >
          <image :src="IMAGE_URL + item.icon" mode="aspectFit"></image>
          <view>{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="white-box" style="margin-top: 40rpx">
      <view class="font30 title fontbold-500">其他</view>
      <view class="flex center between service-item">
        <view
          v-for="item in otherType"
          class="flex column item"
          style="margin-bottom: 0"
          @click="goPage(item.url)"
        >
          <image :src="IMAGE_URL + item.icon" mode="aspectFit"></image>
          <view>{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="white-box" style="margin-top: 40rpx">
      <view
        v-for="item in list"
        class="flex between list-item"
        @click="goPage(item.url)"
      >
        <view class="flex">
          <image :src="IMAGE_URL + item.icon"></image>
          <view>{{ item.name }}</view>
        </view>
        <i class="iconfont icon-jiantou font28"></i>
      </view>
    </view>
  </view>
</template>

<script>
import headerVue from "../../components/header.vue";
import appConfig from "@/config/app.js";

export default {
  data() {
    return {
      IMAGE_URL: appConfig.IMAGE_URL,
      orderType: [
        {
          name: "邻工订单",
          icon: "/static/mine/lgdd.png",
          url: "/views/mine/myorder",
        },
        {
          name: "家政订单",
          icon: "/static/mine/jzdd.png",
          url: "/views/mine/myorder",
        },
        {
          name: "商城订单",
          icon: "/static/mine/scdd.png",
          url: "/views/mine/myorder",
        },
      ],
      serviceType: [
        {
          name: "我的发布",
          icon: "/static/mine/wdfb.png",
          url: "/views/mine/mypublish",
        },
        {
          name: "我的收藏",
          icon: "/static/mine/wdsc.png",
          url: "/views/mine/mycollect",
        },
        {
          name: "我的报名",
          icon: "/static/mine/wdbm.png",
          url: "/views/mine/mysignup",
        },
        {
          name: "家庭合约",
          icon: "/static/mine/jthy.png",
          url: "/views/mine/familyContract",
        },
        {
          name: "我的合同",
          icon: "/static/mine/wdht.png",
          url: "/views/mine/myContract",
        },
        {
          name: "领券中心",
          icon: "/static/mine/ljzx.png",
          url: "/views/mine/couponCenter",
        },
        {
          name: "房屋管理",
          icon: "/static/mine/fwgl.png",
          url: "/views/mine/houseManage",
        },
        {
          name: "我的点赞",
          icon: "/static/mine/wddz.png",
          url: "/views/mine/mylike",
        },
      ],
      otherType: [
        {
          name: "参与话题",
          icon: "/static/mine/cyht.png",
          url: "/views/mine/mytopic",
        },
        {
          name: "发票中心",
          icon: "/static/mine/fpzx.png",
          url: "/views/mine/invoiceCenter",
        },
        {
          name: "地址管理",
          icon: "/static/mine/dzgl.png",
          url: "/views/address/manage",
        },
        {
          name: "我的分销",
          icon: "/static/mine/wdfx.png",
          url: "/views/mine/mydistribution",
        },
      ],
      list: [
        {
          name: "商家入驻",
          icon: "/static/mine/sjrz.png",
          url: "/views/mine/shopJoin",
        },
        {
          name: "师傅入驻",
          icon: "/static/mine/sfrz.png",
          url: "/views/mine/sfJoin",
        },
        {
          name: "我的投诉",
          icon: "/static/mine/wdts.png",
          url: "/views/mine/mycomplaint",
        },
        {
          name: "意见反馈",
          icon: "/static/mine/yjfk.png",
          url: "/views/mine/feedback",
        },
        {
          name: "系统设置",
          icon: "/static/mine/xtsz.png",
          url: "/views-master/my/sys-set?pageTerminalType=user",
        },
      ],

      userInfo: {},
    };
  },
  components: {
    headerVue,
  },
  onLoad() {
    let userInfo = uni.getStorageSync('userInfo');  
    console.error('userInfo',userInfo)
  },
  methods: {
    onWarmCoreValueClick() {
      uni.navigateTo({
        url: "/views-user/my/warm-core-value",
      });
    },
    onBalanceClick() {
      uni.navigateTo({
        url: "/views-user/my/balance",
      });
    },
    toPoints() {
      uni.navigateTo({
        url: "/views-user/points/index",
      });
    },
    goPage(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// .main {
// 	background: url("/static/mine/mine-bg.png") no-repeat;
// 	background-position: top;
// 	background-size: contain;
// }

.bg-box {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}

.user {
  padding: 0 240rpx 0 32rpx;
  box-sizing: border-box;

  .info {
    .avatar {
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;
      border-radius: 50%;
    }

    .address {
      color: $uni-text-color-grey;
      margin-top: 12rpx;
    }
  }

  .wallet {
    margin-top: 36rpx;

    .item {
      text-align: center;
    }

    .fontbold-500 {
      color: $uni-color-primary;
      margin-bottom: 8rpx;
    }
  }
}

.white-box {
  margin: 0 32rpx 28rpx 32rpx;
  padding: 28rpx;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;

  .title {
    margin-bottom: 28rpx;
    color: #333333;
  }

  .order-item {
    font-size: 24rpx;
    color: #333333;
    padding: 0 98rpx;
    box-sizing: border-box;

    image {
      width: 72rpx;
      height: 72rpx;
      margin-bottom: 12rpx;
    }
  }

  .service-item {
    flex-wrap: wrap;
    font-size: 24rpx;
    color: #333333;

    image {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 8rpx;
    }

    .item {
      width: 25%;
      margin-bottom: 40rpx;
    }
  }

  .list-item {
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    margin-top: 46rpx;

    &:nth-child(1) {
      margin: 0;
    }

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 12rpx;
    }
  }
}
</style>
